import React, {FC, useEffect, useState} from "react";
import {message} from "antd";
import {Menu, Toolbar} from "@antv/x6-react-components";
import "@antv/x6-react-components/es/menu/style/index.css";
import "@antv/x6-react-components/es/toolbar/style/index.css";
import "antd/dist/antd.css";
import {
    AlignCenterOutlined,
    DeleteOutlined,
    ExpandOutlined,
    GroupOutlined,
    RedoOutlined, SaveOutlined,
    UndoOutlined,
    UngroupOutlined,
    ZoomInOutlined,
    ZoomOutOutlined
} from "@ant-design/icons";
import styles from "./index.module.less";
import {Node} from "@antv/x6";
import _ from "lodash";

const Item = Toolbar.Item; // eslint-disable-line
const Group = Toolbar.Group; // eslint-disable-line

interface WorkshopLayoutToolbarProps {
    toolbarOnClick?: (name: string) => void
    selectedNodes?: Node[]
    treeNodeInfo?: any
}

const WorkshopLayoutToolbar: FC<WorkshopLayoutToolbarProps> = (props) => {

    const [deleteButtondisabled, setDeleteButtondisabled] = useState<boolean>(true)
    const [groupButtondisabled, setGroupButtondisabled] = useState<boolean>(true)
    const [unGroupButtondisabled, setUnGroupButtondisabled] = useState<boolean>(true)
    const [saveButtondisabled, setSaveButtondisabled] = useState<boolean>(false)


    useEffect(() => {
        console.log('WorkshopLayoutToolbar=========props.selectedNodes', props.selectedNodes)

        if (props.selectedNodes!.length > 0 && props.treeNodeInfo.type != 'workshop') {
            setDeleteButtondisabled(false)
        } else {
            setDeleteButtondisabled(true)
        }

        if (props.selectedNodes!.length > 1) {
            setGroupButtondisabled(false)
            props.selectedNodes?.forEach((item: Node) => {
                // if (item.getParent()) {
                //     setGroupButtondisabled(true)
                // }
                if (item.getChildren()) {
                    setGroupButtondisabled(true)
                }
            })
        } else {
            setGroupButtondisabled(true)
        }

        if (props.selectedNodes!.length > 0) {
            props.selectedNodes?.forEach((item: Node) => {
                if (item.getChildren()) {
                    setUnGroupButtondisabled(false)
                }
            })
        } else {
            setUnGroupButtondisabled(true)
        }

    }, [props.selectedNodes])

    useEffect(() => {
        if (props.treeNodeInfo.type == 'workshop') {
            setSaveButtondisabled(true)
        } else {
            setSaveButtondisabled(false)
        }
    }, [props.treeNodeInfo])

    const onClick = (name: string) => {
        if (props.toolbarOnClick)
            props.toolbarOnClick(name)
        // message.success(`${name} clicked`, 10);
    };

    const onItemClick = () => {
        onClick("undo");
    };

    const renderZoomDropdown = () => {
        const MenuItem = Menu.Item; // eslint-disable-line
        const Divider = Menu.Divider; // eslint-disable-line

        return (
            <Menu>
                <MenuItem name="25">25%</MenuItem>
                <MenuItem name="50">50%</MenuItem>
                <MenuItem name="75">75%</MenuItem>
                <MenuItem name="100">100%</MenuItem>
                <MenuItem name="125">125%</MenuItem>
                <MenuItem name="150">150%</MenuItem>
                <MenuItem name="200">200%</MenuItem>
                <MenuItem name="300">300%</MenuItem>
                <MenuItem name="400">400%</MenuItem>
            </Menu>
        );
    }


    return (
        <div className={styles.content}>
            <Toolbar
                hoverEffect={true}
                size="big"
                onClick={onClick}
                // extra={<span>工具栏</span>}
            >
                <Group>
                    <Item
                        name="zoom"
                        tooltipAsTitle={true}
                        tooltip="Zoom (ctrl+Mousewheel)"
                        dropdown={renderZoomDropdown()}
                    >
                            <span
                                style={{
                                    display: "inline-block",
                                    width: 40,
                                    textAlign: "right"
                                }}
                            >
                              100%
                            </span>
                    </Item>
                    <Item
                        name="resetView"
                        tooltip="重置"
                        icon={<ExpandOutlined/>}
                    />
                    <Item
                        name="fitWindow"
                        tooltip="居中"
                        icon={<AlignCenterOutlined/>}
                    />
                </Group>


                <Group>
                    <Item
                        name="zoomIn"
                        tooltip="放大 (crtl+Mousewheel)"
                        icon={<ZoomInOutlined/>}
                    />

                    <Item
                        name="zoomOut"
                        tooltip="缩小 (crtl+Mousewheel)"
                        icon={<ZoomOutOutlined/>}
                    />
                </Group>

                <Group>
                    <Item
                        name="undo"
                        tooltip="撤销 (crtl + Z)"
                        icon={<UndoOutlined/>}
                    />
                    <Item
                        name="redo"
                        tooltip="重做 (crtl + Y)"
                        icon={<RedoOutlined/>}
                    />
                </Group>
                {/*<Group>*/}
                {/*    <Item*/}
                {/*        name="group"*/}
                {/*        tooltip="新建系统"*/}
                {/*        disabled={groupButtondisabled}*/}
                {/*        icon={<GroupOutlined/>}*/}
                {/*    />*/}
                {/*    <Item*/}
                {/*        name="unGroup"*/}
                {/*        tooltip="解散系统"*/}
                {/*        disabled={unGroupButtondisabled}*/}
                {/*        icon={<UngroupOutlined/>}*/}
                {/*    />*/}
                {/*</Group>*/}
                <Group>
                    <Item
                        name="delete"
                        icon={<DeleteOutlined/>}
                        disabled={deleteButtondisabled}
                        tooltip="删除 (Delete/Backspace)"
                    />
                    <Item
                        name="save"
                        icon={<SaveOutlined/>}
                        disabled={saveButtondisabled}
                        tooltip="保存"
                    />
                </Group>
            </Toolbar>
        </div>
    );

}
export default WorkshopLayoutToolbar
